<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('路由列表')" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
<!--             <div class="col-sm-12 search-collapse"> -->
<!--                 <form id="formId"> -->
<!--                     <div class="select-list"> -->
<!--                         <ul> -->
<!--                             <li> -->
<!--                                 <p>产品名称：</p> -->
<!--                                 <input id="productName" type="text" name="productName"/> -->
<!--                             </li> -->
<!--                             <li> -->
<!--                                 <p>项目类型：</p> -->
<!--                                 <select id="productType" name="productType" > -->
<!--                                     <option value="">所有</option> -->
<!--                                     <option value="1">新手标</option> -->
<!--                                     <option value="2">散标</option> -->
<!--                                     <option value="3">VIP项目</option> -->
<!--                                 </select> -->
<!--                             </li> -->
<!--                             <li> -->
<!--                                 <p>状态：</p> -->
<!--                                 <select id="currentStatus" name="currentStatus"> -->
<!--                                     <option value="">所有</option> -->
<!--                                     <option value="1">募集</option> -->
<!--                                     <option value="2">投资中</option> -->
<!--                                     <option value="3">投资结束</option> -->
<!--                                 </select> -->
<!--                             </li> -->
<!--                             <li> -->
<!--                                 <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a> -->
<!--                                 <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a> -->
<!--                             </li> -->
<!--                         </ul> -->
<!--                     </div> -->
<!--                 </form> -->
<!--             </div> -->

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="$.operate.addTab()">
                    <i class="fa fa-plus"></i> 添加
                </a>
            </div>
            <div class="col-sm-12 select-table table-bordered table‐responsive">
                <table id="bootstrap-table" class="table text‐nowrap"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">

        let prefix = ctx + "system/route";

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                modalName: "路由",
                clickToSelect: true,
                pageSize: 50,
                columns: [
                {
					title: "序号",
                    align: 'center',
					formatter: function (value, row, index) {
						return $.table.serialNumber(index);
					}
				},
                {
                    field : 'routeId',
                    title : 'routeId',
                    visible: true
                },
                {
                    field : 'uri',
                    title : 'uri'
                },
                {
                    title : '使用状态',
                    align: 'center',
                    formatter: function(value, row) {

                        return statusTools(row);
                    }
                },
                {
                    field : 'updateTime',
                    title : '更新时间'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row) {
                        let actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="edit(\'' + row.id + '\')"><i class="fa fa-edit"/> 修改</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="del(\'' + row.id + '\')"><i class="fa fa-remove"/> 删除</a> ');
                        actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="detail(\'' + row.id + '\')"><i class="fa fa-search"/> 详细</a> ');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });

        /**
         * 路由使用状态
         */
        function statusTools(row) {
            if (row.currentStatus === 0) {
                return '<i class="fa fa-toggle-off text-info fa-2x" onclick="enable(\'' + row.id + '\')"></i> ';
            } else {
                return '<i class="fa fa-toggle-on text-info fa-2x" onclick="disable(\'' + row.id + '\')"></i> ';
            }
        }

        /**
         * 停用
         */
        function disable(strId) {
            $.modal.confirm("确认要停用该路由设置？", function() {
                $.operate.post(prefix + "/changeStatus", { "id": strId, "currentStatus": 0 }, function (data) {
                    if (!data.isSuccess) {
                        $.modal.alertSuccess(data.msg)
                    }
                });
            });
        }

        /**
         * 启用
         * @param pCid
         */
        function enable(strId) {
            $.modal.confirm("确认要启用该路由设置吗？", function() {
                $.operate.post(prefix + "/changeStatus", { "id": strId, "currentStatus": 1 }, function (data) {
                    if (!data.isSuccess) {
                        $.modal.alertSuccess(data.msg)
                    }
                });
            });
        }

        function edit(routeId) {
            $.modal.openTab("修改路由", prefix + "/edit/" + routeId);
        }

        function del(id) {
            $.modal.confirm("确认要删除该路由设置吗？", function () {
                $.operate.post(prefix + "/delete", {"id": id}, function (data) {
                    if (!data.isSuccess) {
                        $.modal.alertSuccess(data.msg)
                    }
                });
            });
        }

        function detail(strId) {
            let options = {
                title: '路由详细',
                width: "800",
                url: prefix + "/detail/" + strId,
                callBack: function (index) {
                    layer.close(index);
                }
            };
            $.modal.openOptions(options);
        }

    </script>
</body>
</html>
